<template>
  <div class="home">
    <p ref="mvp">我是p标签</p>
    <!-- v-slot 简写形式是 # -->
     <my-header>
       <template #left>
          返回
       </template>
       <template #center>
          我是首页
       </template>
     </my-header>
     <my-list :childList="list" ref="myList">
       <template #right="{i}">
         <button @click="del(i)">删除</button>
       </template>
     </my-list>
  </div>
</template>

<script>
// @ is an alias to /src
import myHeader from '../components/myHeader'
import MyList from '../components/myList'
import { ref } from 'vue';
export default {
  name: 'HomeView',
  components: {
    myHeader,
    MyList
  },
  setup(props) {
    const list = ref([
        {name:'鲁智深',explan:'花和尚'},
        {name:'武松',explan:'行者'},
        {name:'宋江',explan:'及时雨'},
        {name:'燕青',explan:'浪子'}
      ])

    const mvp = ref(null);
    const myList = ref(null);
    const del = (index) => {
      // list.value.splice(index,1);
      console.log(myList.value);
      myList.value.add();
    }
    return {
      list,
      del,
      mvp,
      myList
    }
  }
}
</script>
